<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min%20(1).css"/>
	</head>
	<body>
		
		<div id="app">
			<div>
				<table class="table table-bordered">
					<tr>
						<td>图书编号</td>
						<td>图书名称</td>
						<td>图书类别</td>
						<td>详情概述</td>
						<td>价格</td>
						<td>库存</td>
						<td>发布人</td>
						<td></td>
					</tr>
					<tr>
						<td><input type="text" v-model="card"></td>
						<td><input type="text" v-model="name">*</td>
						<td><select v-model="cate">
							<option value ="cate">科技类</option>
							<option value ="cate">文学类</option>
							<option value ="cate">财经类</option>
							<option value ="cate">其他类</option>
						</select></td>
						<td>
							<textarea v-model="cont"></textarea>
						</td>
						<td>
							<input type="number" v-model="price"> *必要数字型 
						</td>
						<td>
							<input type="number" v-model="ku"> *必要数字型
						</td>
						<td>
							<input type="text" v-model="author"> 
						</td>
						<td>
							<button type="button" @click="add()">添加</button>
							<button type="reset" >重置</button>
						</td>
					</tr>
				</table>
			</div>
			<table class="table">
				<tr>
					<td>图书ID</td>
					<td>图书编号</td>
					<td>图书名称</td>
					<td>图书类型</td>
					<td>图书图片</td>
					<td>图书价格</td>
					<td>图书评分</td>
					<td>图书作者</td>
					<td>图书库存</td>
					<td>是否购买</td>
					<td>图书评价</td>
					<td>加入时间</td>
					<td>操作</td>
				</tr>
				<tr v-for="v in book">
					<td>{{v.id}}</td>
					<td>{{v.card}}</td>
					<td>{{v.name}}</td>
					<td>{{v.cate}}</td>
					<td><img :src="v.img" width="50px"></td>
					<td>{{v.price}}</td>
					<td>{{v.point}}</td>
					<td>{{v.author}}</td>
					<td>{{v.ku}}</td>
					<td>{{v.mai}}</td>
					<td>{{v.cont}}</td>
					<td>{{v.time}}</td>
					<td>
						<a href="#">删除</a>
						<a href="#">修改</a>
						<a href="#">详情</a>
					</td>
				</tr>
			</table>
			<button type="button"@click="getpage(page-1)">上一页</button>
			<button type="button" v-for="v in sumpage" @click="getpage(v)">{{v}}</button>
			<button type="button"@click="getpage(page+1)">下一页</button>
		</div>
	</body>
</html>
<script type="text/javascript">
	var app=new Vue({
		el:"#app",
		data:{
			book:[],
			page:"",
			size:"",
			sumpage:"",
			count:"",
			card:"",
			name:"",
			cate:"",
			price:"",
			ku:"",
			point:"",
			author:"",
			mai:"",
			cont:"",
			time:"",
			img:"",
		},
		methods:{
			getpage(page){
				axios.post("http://127.0.0.1:8080/page?page="+page).then(res=>{
					app.book=res.data.data
					app.page=res.data.res
					app.count=res.data.count
					app.size=res.data.size
					app.sumpage=res.data.sumpage
				})
			},
			add(){
				var data =new FormData()
				data.append("card",this.card)
				data.append("name",this.name)
				data.append("cate",this.cate)
				data.append("cont",this.cont)
				data.append("ku",this.ku)
				data.append("price",this.price)
				data.append("author",this.author)
				axios.post("http://127.0.0.1:8080/add",data).then(res=>{
					console.log(res)
					alert("添加成功")
					location.reload()
				})
			}
		},
		created:function(){
			axios.post("http://127.0.0.1:8080/page").then(res=>{
				console.log(res)
				
				app.book=res.data.data
				app.page=res.data.res
				app.count=res.data.count
				app.size=res.data.size
				app.sumpage=res.data.sumpage
			})
		}
	})
</script>
